<template>
	<view class="content" :style="{'--color':color}">
		
		<status-bar title='选择使用方式' :back="back"></status-bar>
		<block v-for="(item,index) in pageData" :key="item.id">
			<view class="viewbox auto m-top20 p-bot20 bgwhite bor_radius_10 p-left20">
				<view class="row bot p-top20 p-bot20 j-sb a-center">
					<view class="color_33 h6 bold">订单时间：{{item.order_date}}</view>
				</view>
				
				<view class="rows d-flex m-top10 f-nowrap">
					<view class="product_Img p-re f-shrink-0 f-gorw0">
						 <image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="wh bor_radius_10"></image>
						 <view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{item.id}}</view>
					</view>
					<view class="d-flex f-column j-sb m-left20 f-gorw1">
						<text class="color_33 size30 ellipsis">{{item.pdtname}}</text>
						<view class="d-flex a-center" v-if="item.pdt_spec">
							<text class="color_99 h6 f-shrink-0">规格：</text>
							<text class="color_33 h6 bold ellipsis">{{item.pdt_spec}}</text>
						</view>
						<view class="d-flex a-center">
							<text class="color_99 h6">数量：</text>
							<text class="color_33 h6 bold">X{{item.pdt_num}}</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		
		
		
		<view class="viewbox auto m-top20 bgwhite p-left20 bor_radius_10">
			
			<view class="selectLi bot" @click="toUrl('homeDelivery?ids='+id)">
				<view class="d-flex a-center">
					<view class="iconfont icon-a-2501 size48 color_ff"></view>
					<text class="color_20 size30 m-left20">快递到家</text>
				</view>
				<view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
			</view>
		<!-- 	@click="verify = true" -->
			<view class="selectLi bot" @click="verifyBtn()">
				<view class="d-flex a-center">
					<view class="iconfont icon-a-2502 size48 color_5b"></view>
					<text class="color_20 size30 m-left20">门店自提</text>
				</view>
				<view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
			</view>
			
			<!-- #ifdef H5 -->
			<view class="selectLi bot" @click="ShareIn()">
				<view class="d-flex a-center">
					<view class="iconfont icon-a-2503 size48 color_ff8"></view>
					<text class="color_20 size30 m-left20">赠送好友</text>
				</view>
				<view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
			</view>
		  <!-- #endif -->
		  <!-- #ifdef MP-WEIXIN -->
			<view class="selectLi bot" >
				<button open-type="share" class="Share"></button>
				<view class="d-flex a-center">
					<view class="iconfont icon-a-2503 size48 color_ff8"></view>
					<text class="color_20 size30 m-left20">赠送好友</text>
				</view>
				<view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
			</view>
			<!-- #endif -->
			
			<view class="selectLi bot" @click="trajectory">
				<view class="d-flex a-center">
					<view class="iconfont icon-a-2503 size48 color_ac5"></view>
					<text class="color_20 size30 m-left20">商品轨迹</text>
				</view>
				<view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
			</view>
		</view>
		
		

		
		<!--  线下使用 -->
		<view class="masking d-flex j-centert a-center" v-if="verify" @click="verify = false">
			<view class="rows codeImg bgwhite bor_radius_20 p-bot40">
				<view class="row j-centert p-top60 p-bot60 bot_bor">
					<image :src="imgUrl+pageCode.QRCodeImg" mode="aspectFill" class="codeverify"></image>
				</view>
				<block v-for="(item,index) in pageCode.orderCode" :key="index">
				 <view class="row j-centert color_33 h5 bold p-top30  t-letter2">{{item.idcode}}</view>
				</block>
			</view>
		</view>
	</view>
</template>


<script>
	import {mapState} from 'vuex';
	// #ifdef H5
	import jweixin from 'jweixin-module'
	// #endif
	export default {
		data() {
			return {
				imgUrl:this.imgUrl,
				
				shareBox:'',
				verify:false, // 线下使用
				id:'',  // 商品id
				ids:[],
				keycode:[],
			
				pageData:[],
				pageCode:{},
				dtime:'',
				jssdk:'',
			}
		},
		onLoad(e) {
			let that = this;
			if(e.id) that.id = e.id
			if(e.ids) that.id = e.ids.toString();
			// #ifdef H5
			 this.$common.H5HideShare();
			// #endif
			
		
			
		},
		onShow() {
			let that = this;
			that.ids = [];   // 清空 避免串
			that.keycode = []; // 清空 避免串
			// that.getshareInfo();
			that.getGiveGoodsInfo();
			
		},
		methods: {
			
			// 获取jssdk信息
			getshareInfo(){
				let that = this;
				that.$http.get({
					url:'/zzj_singleSaleApi/getJssdkConfig',
				
				}).then(res=>{
					that.jssdk = res;
					
				})
			},
			//  获取分享的信息
			ShareIn(){
				let that = this;
				// #ifdef H5
					this.$common.H5ShowShare();
					jweixin.config(that.jssdk);
				// #endif
				that.$http.post({
					url:'/singleSaleWarehouseApi/getShareInfo',
					data:{
						checkid:that.ids.join(','),
						keycode:that.keycode.join(',')
					}
				}).then(res=>{
					if(res.errcode == '100'){
						if(res.data){
							that.shareBox = res.data;
							let share = res.data;
							//  #ifdef H5

								jweixin.ready(function(){
									let shareData = {
										title: share.title, // 分享标题
										desc: share.desc, // 分享描述
										link: share.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
										imgUrl: share.imgUrl, // 分享图标
										success:function(){
											that.Sharing();
										},
										fail:function(){
											uni.showToast({
												title:'失败',
												icon:'none'
											})
										}
									}
									//分享到朋友圈
									jweixin.updateAppMessageShareData(shareData);
									//分享给好友
									jweixin.updateTimelineShareData(shareData);
									//分享到朋友圈
									jweixin.onMenuShareTimeline(shareData);
									//分享给好友
									jweixin.onMenuShareAppMessage(shareData);
									//分享到QQ
									jweixin.onMenuShareQQ(shareData);
								})
							// #endif
						}
					}else{
						uni.showToast({title: res.msg,icon: 'none'})
					}
				})
			},
			
			
			//  分享入记录表
			Sharing(){
				let that = this;
				that.$http.post({
					url:'/singleSaleWarehouseApi/Sharing',
					data:{
						ids:that.ids.toString(),
					
					}
				}).then(res=>{
					if(res.errcode != '100') return that.$Toast( res.msg);
					
				})
			},
			// 获取商品信息
			getGiveGoodsInfo(){
				let that = this;
				uni.showLoading({title:'加载中~'})
				that.$http.post({
					url:'/singleSaleWarehouseApi/getGiveGoodsInfo',
					data:{
						ids:that.id,
					}
				}).then(res=>{
					uni.hideLoading();
					if(res.errcode == '100'){
						const result = res.data;
						
						result.forEach((item,index)=>{
							that.keycode.push(item.keycode)
							that.ids.push(item.id)
						})
						that.pageData = result;
						// #ifdef H5
						 that.getshareInfo();
						
						// #endif
						that.ShareIn();
					}else{
						uni.showToast({title: res.msg,icon: 'none'})
					}
				})
			},
			
			
			// 获取二维码
			verifyBtn(){
				let that = this;
				uni.showLoading({title:'加载中~'})
				that.$http.post({
					url:'/singleSaleWarehouseApi/getGoodsQRCode',
					data:{
						checkid:that.ids.toString(),
						keycode:that.keycode.toString()
					}
				}).then(res=>{
					uni.hideLoading();
					if(res.errcode == '100'){
						that.verify = true;
						that.pageCode = res.data;
						that.checkqrcode();
					}else{
						uni.showToast({title: res.msg,icon: 'none'})
					}
				})
			},
			
			// 查询是否被核销
			checkqrcode(){
				let that = this;
				clearInterval(that.dtime);
				let Endids = that.ids[that.ids.length - 1];  // 最后一个
				let Endkeycode = that.keycode[that.keycode.length - 1];  // 最后一个
				that.$http.post({
					url:'/singleSaleWarehouseApi/checkqrcode',
					data:{
						checkid:Endids,
						keycode:Endkeycode
					}
				}).then(res=>{
					if(res.errcode != '100') return that.$Toast(res.msg);
					if(that.verify){
						if(res.flag == 1){
							that.dtime = setInterval(()=>{
								that.checkqrcode();
							},3000)
						}else if(res.flag == 3){
							clearInterval(that.dtime);
							that.verify = false;
							that.toUrl(`homeDelivery?ids=${res.data.checkids.join(',')}&delivery_type=1`)
						}else{
							clearInterval(that.dtime);
							 that.$Toast('核销成功',2)
						}
					}else{
						clearInterval(that.dtime);
					}
				})
			},
			
			// 商品轨迹
			trajectory(){
				let ids = this.ids.join(',');
				let keycode = this.keycode.join(',');
				this.toUrl(`process?ids=${ids}&keycode=${keycode}`)
			}
		},
		computed:{
			...mapState(['color','vid','bid']),
		},
		onShareAppMessage(res) {
			let that = this;
			let giveId = that.ids.join(',');
			let userkey = that.pageData[0].userkey;
			if (res.from === 'button') {// 来自页面内分享按钮
			      console.log(res.target)
			    }
			return {
				title:that.shareBox.title,
				desc:that.shareBox.desc,
				imageUrl:that.shareBox.imgUrl,
				path:`/pages/index/index?share_v_id=${that.vid}&giveId=${giveId}&userkey=${userkey}&pageType=30`
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f7f9fa;
	}
	
	.color_ff{color: #ff816d;}
	.color_5b{color: #5ba7fe;}
	.color_ff8{color: #ff834b;}
	.color_ac5{color: #ac58e3;}
	.selectLi{
		width:100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:20rpx 20rpx 20rpx 0;
		position: relative;
	}
	.Share{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		background-color: transparent;
		border:none;
	}
	.Share::after{
		border:none;
	}
.product_Img{width:140rpx;height: 140rpx;}
.numId{position: absolute;right:0;top:0;background: var(--color);border-radius: 0 10rpx 0 10rpx;}

.share{
	height: 100rpx;
	border-radius: 50rpx;
	-webkit-border-radius: 50rpx;
	margin-top:130rpx;
}
.share::before{
	 content: "";
	 width: 0;
	 height: 0;
	 border-style: solid;
	 border-width: 0 25rpx 30rpx 25rpx;
	 border-color: transparent transparent #FFFFFF transparent;
	 position: absolute;
	 right: 36rpx;
	 top:-28rpx;
}
.getshare{
	height: 50rpx;
	border-radius: 25rpx;
	-webkit-border-radius: 25rpx;
}
.codeImg{
	width:619rpx;
}
.codeverify{
	width:380rpx;
	height: 380rpx;
}
</style>
